<style>
#color_picker
{
	width:300px;
	height:300px;
	background-color: #004f5e;
	background-image: -webkit-linear-gradient(180deg, transparent 55%, #004c5a 45%);
	background-image: -o-linear-gradient(180deg, transparent 50%, #004c5a 50%);
	background-image: -ms-linear-gradient(180deg, transparent 50%, #004c5a 50%);
	background-image: -moz-linear-gradient(180deg, transparent 50%, #004c5a 50%);
	background-image: linear-gradient(90deg, transparent 50%, #004c5a 50%);
	background-size: 30px 30px;
	border-radius:20px;
	position: absolute;
	left:-300px;
	top:-300px;
	z-index: 1300000;
}
	#que_ding_yan_se,#qu_xiao_yan_se
{
	z-index:1300001;
	bottom:20px;
	width:90px;
	height:40px;
	line-height:40px;
	background:orange;
	font-weight:bolder;
	font-size:24px;
	border-radius:10px;
	text-align:center;
	cursor:pointer;
}
#que_ding_yan_se
{
	left:10px;
}
#qu_xiao_yan_se
{
	right:10px;
}

#previewDiv
{
	display:none;
}
</style>


<input type="text" class="color" value="pink" id="value_of_color_chooser" style="display: none;" onkeydown="change_color()">
 	
 	<div id="que_ding_yan_se">确定</div>
	<div id="qu_xiao_yan_se">取消</div>
	



<script>
var CROSSHAIRS_LOCATION = './app/public/images/color_picker/crosshairs.png';
var HUE_SLIDER_LOCATION = './app/public/images/color_picker/h.png';
var HUE_SLIDER_ARROWS_LOCATION = './app/public/images/color_picker/position.png';
var SAT_VAL_SQUARE_LOCATION = './app/public/images/color_picker/sv.png';

function hexToRgb(hex_string, default_)
{
    if (default_ == undefined)
    {
        default_ = null;
    }

    if (hex_string.substr(0, 1) == '#')
    {
        hex_string = hex_string.substr(1);
    }
    
    var r;
    var g;
    var b;
    if (hex_string.length == 3)
    {
        r = hex_string.substr(0, 1);
        r += r;
        g = hex_string.substr(1, 1);
        g += g;
        b = hex_string.substr(2, 1);
        b += b;
    }
    else if (hex_string.length == 6)
    {
        r = hex_string.substr(0, 2);
        g = hex_string.substr(2, 2);
        b = hex_string.substr(4, 2);
    }
    else
    {
        return default_;
    }
    
    r = parseInt(r, 16);
    g = parseInt(g, 16);
    b = parseInt(b, 16);
    if (isNaN(r) || isNaN(g) || isNaN(b))
    {
        return default_;
    }
    else
    {
        return {r: r / 255, g: g / 255, b: b / 255};
    }
}

function rgbToHex(r, g, b, includeHash)
{
    r = Math.round(r * 255);
    g = Math.round(g * 255);
    b = Math.round(b * 255);
    if (includeHash == undefined)
    {
        includeHash = true;
    }
    
    r = r.toString(16);
    if (r.length == 1)
    {
        r = '0' + r;
    }
    g = g.toString(16);
    if (g.length == 1)
    {
        g = '0' + g;
    }
    b = b.toString(16);
    if (b.length == 1)
    {
        b = '0' + b;
    }
    return ((includeHash ? '#' : '') + r + g + b).toUpperCase();
}

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);

function fixPNG(myImage)
{
    if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
    {
        var node = document.createElement('span');
        node.id = myImage.id;
        node.className = myImage.className;
        node.title = myImage.title;
        node.style.cssText = myImage.style.cssText;
        node.style.setAttribute('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader"
                                        + "(src=\'" + myImage.src + "\', sizingMethod='scale')");
        node.style.fontSize = '0';
        node.style.width = myImage.width.toString() + 'px';
        node.style.height = myImage.height.toString() + 'px';
        node.style.display = 'inline-block';
        return node;
    }
    else
    {
        return myImage.cloneNode(false);
    }
}

function trackDrag(node, handler)
{
    function fixCoords(x, y)
    {
        var nodePageCoords = pageCoords(node);
        x = (x - nodePageCoords.x) + document.documentElement.scrollLeft;
        y = (y - nodePageCoords.y) + document.documentElement.scrollTop;
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > node.offsetWidth - 1) x = node.offsetWidth - 1;
        if (y > node.offsetHeight - 1) y = node.offsetHeight - 1;
        return {x: x, y: y};
    }
    function mouseDown(ev)
    {
        var coords = fixCoords(ev.clientX, ev.clientY);
        var lastX = coords.x;
        var lastY = coords.y;
        handler(coords.x, coords.y);

        function moveHandler(ev)
        {
            var coords = fixCoords(ev.clientX, ev.clientY);
            if (coords.x != lastX || coords.y != lastY)
            {
                lastX = coords.x;
                lastY = coords.y;
                handler(coords.x, coords.y);
            }
        }
        function upHandler(ev)
        {
            myRemoveEventListener(document, 'mouseup', upHandler);
            myRemoveEventListener(document, 'mousemove', moveHandler);
            myAddEventListener(node, 'mousedown', mouseDown);
        }
        myAddEventListener(document, 'mouseup', upHandler);
        myAddEventListener(document, 'mousemove', moveHandler);
        myRemoveEventListener(node, 'mousedown', mouseDown);
        if (ev.preventDefault) ev.preventDefault();
    }
    myAddEventListener(node, 'mousedown', mouseDown);
    node.onmousedown = function(e) { return false; };
    node.onselectstart = function(e) { return false; };
    node.ondragstart = function(e) { return false; };
}

var eventListeners = [];

function findEventListener(node, event, handler)
{
    var i;
    for (i in eventListeners)
    {
        if (eventListeners[i].node == node && eventListeners[i].event == event
         && eventListeners[i].handler == handler)
        {
            return i;
        }
    }
    return null;
}
function myAddEventListener(node, event, handler)
{
    if (findEventListener(node, event, handler) != null)
    {
        return;
    }

    if (!node.addEventListener)
    {
        node.attachEvent('on' + event, handler);
    }
    else
    {
        node.addEventListener(event, handler, false);
    }

    eventListeners.push({node: node, event: event, handler: handler});
}

function removeEventListenerIndex(index)
{
    var eventListener = eventListeners[index];
    delete eventListeners[index];
    
    if (!eventListener.node.removeEventListener)
    {
        eventListener.node.detachEvent('on' + eventListener.event,
                                       eventListener.handler);
    }
    else
    {
        eventListener.node.removeEventListener(eventListener.event,
                                               eventListener.handler, false);
    }
}

function myRemoveEventListener(node, event, handler)
{
    removeEventListenerIndex(findEventListener(node, event, handler));
}

function cleanupEventListeners()
{
    var i;
    for (i = eventListeners.length; i > 0; i--)
    {
        if (eventListeners[i] != undefined)
        {
            removeEventListenerIndex(i);
        }
    }
}
myAddEventListener(window, 'unload', cleanupEventListeners);



function hsvToRgb(hue, saturation, value)
{
    var red;
    var green;
    var blue;
    if (value == 0.0)
    {
        red = 0;
        green = 0;
        blue = 0;
    }
    else
    {
        var i = Math.floor(hue * 6);
        var f = (hue * 6) - i;
        var p = value * (1 - saturation);
        var q = value * (1 - (saturation * f));
        var t = value * (1 - (saturation * (1 - f)));
        switch (i)
        {
            case 1: red = q; green = value; blue = p; break;
            case 2: red = p; green = value; blue = t; break;
            case 3: red = p; green = q; blue = value; break;
            case 4: red = t; green = p; blue = value; break;
            case 5: red = value; green = p; blue = q; break;
            case 6: 
            case 0: red = value; green = t; blue = p; break;
        }
    }
    return {r: red, g: green, b: blue};
}

function rgbToHsv(red, green, blue)
{
    var max = Math.max(Math.max(red, green), blue);
    var min = Math.min(Math.min(red, green), blue);
    var hue;
    var saturation;
    var value = max;
    if (min == max)
    {
        hue = 0;
        saturation = 0;
    }
    else
    {
        var delta = (max - min);
        saturation = delta / max;
        if (red == max)
        {
            hue = (green - blue) / delta;
        }
        else if (green == max)
        {
            hue = 2 + ((blue - red) / delta);
        }
        else
        {
            hue = 4 + ((red - green) / delta);
        }
        hue /= 6;
        if (hue < 0)
        {
            hue += 1;
        }
        if (hue > 1)
        {
            hue -= 1;
        }
    }
    return {
        h: hue,
        s: saturation,
        v: value
    };
}

function pageCoords(node)
{
    var x = node.offsetLeft;
    var y = node.offsetTop;
    var parent = node.offsetParent;
    while (parent != null)
    {
        x += parent.offsetLeft;
        y += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return {x: x, y: y};
}

var huePositionImg = document.createElement('img');
huePositionImg.galleryImg = false;
huePositionImg.width = 35;
huePositionImg.height = 11;
huePositionImg.src = HUE_SLIDER_ARROWS_LOCATION;
huePositionImg.style.position = 'absolute';

var hueSelectorImg = document.createElement('img');
hueSelectorImg.galleryImg = false;
hueSelectorImg.width = 35;
hueSelectorImg.height = 200;
hueSelectorImg.src = HUE_SLIDER_LOCATION;
hueSelectorImg.id="color_picker_chang_tiao";
hueSelectorImg.style.display = 'block';
var satValImg = document.createElement('img');
satValImg.galleryImg = false;
satValImg.width = 200;
satValImg.height = 200;
satValImg.id="slide_me_to_change_color";
satValImg.src = SAT_VAL_SQUARE_LOCATION;
satValImg.style.display = 'block';

var crossHairsImg = document.createElement('img');
crossHairsImg.galleryImg = false;
crossHairsImg.width = 21;
crossHairsImg.height = 21;
crossHairsImg.src = CROSSHAIRS_LOCATION;
crossHairsImg.id="color_picker_jia_hao";
crossHairsImg.style.position = 'absolute';

function makeColorSelector(inputBox)
{
    var rgb, hsv
    
    function colorChanged()
    {
        var hex = rgbToHex(rgb.r, rgb.g, rgb.b);
        var hueRgb = hsvToRgb(hsv.h, 1, 1);
        var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
        previewDiv.style.background = hex;
        previewDiv.id="previewDiv";
        inputBox.value = hex;
        satValDiv.style.background = hueHex;
        crossHairs.style.left = ((hsv.v*199)-10).toString() + 'px';
        crossHairs.style.top = (((1-hsv.s)*199)-10).toString() + 'px';
        huePos.style.top = ((hsv.h*199)-5).toString() + 'px';
    }
    function rgbChanged()
    {
        hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
        colorChanged();
    }
    function hsvChanged()
    {
        rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
        colorChanged();
    }
    
    var colorSelectorDiv = document.createElement('div');
    colorSelectorDiv.style.padding = '15px';
    colorSelectorDiv.style.position = 'relative';
    colorSelectorDiv.style.height = '275px';
    colorSelectorDiv.style.width = '250px';
    
    var satValDiv = document.createElement('div');
    satValDiv.style.position = 'relative';
    satValDiv.style.width = '200px';
    satValDiv.style.height = '200px';
    var newSatValImg = fixPNG(satValImg);
    satValDiv.appendChild(newSatValImg);
    var crossHairs = crossHairsImg.cloneNode(false);
    satValDiv.appendChild(crossHairs);
    function satValDragged(x, y)
    {
        hsv.s = 1-(y/199);
        hsv.v = (x/199);
        hsvChanged();
    }
    trackDrag(satValDiv, satValDragged)
    colorSelectorDiv.appendChild(satValDiv);

    var hueDiv = document.createElement('div');
    hueDiv.style.position = 'absolute';
    hueDiv.style.left = '230px';
    hueDiv.style.top = '15px';
    hueDiv.style.width = '35px';
    hueDiv.style.height = '200px';
    var huePos = fixPNG(huePositionImg);
    hueDiv.appendChild(hueSelectorImg.cloneNode(false));
    hueDiv.appendChild(huePos);
    function hueDragged(x, y)
    {
        hsv.h = y/199;
        hsvChanged();
    }
    trackDrag(hueDiv, hueDragged);
    colorSelectorDiv.appendChild(hueDiv);
    
    var previewDiv = document.createElement('div');
    previewDiv.style.height = '50px'
    previewDiv.style.width = '50px';
    previewDiv.style.position = 'absolute';
    previewDiv.style.top = '225px';
    previewDiv.style.left = '15px';
    previewDiv.style.border = '1px solid black';
    colorSelectorDiv.appendChild(previewDiv);
    
    function inputBoxChanged()
    {
        rgb = hexToRgb(inputBox.value, {r: 0, g: 0, b: 0});
        rgbChanged();
    }
    myAddEventListener(inputBox, 'change', inputBoxChanged);
    inputBox.size = 8;
    inputBox.style.position = 'absolute';
    inputBox.style.right = '15px';
    inputBox.style.top = (225 + (25 - (inputBox.offsetHeight/2))).toString() + 'px';
    colorSelectorDiv.appendChild(inputBox);
    
    inputBoxChanged();
    
    return colorSelectorDiv;
}

function makeColorSelectors(ev)
{
    var inputNodes = document.getElementsByTagName('input');
    var i;
    for (i = 0; i < inputNodes.length; i++)
    {
        var node = inputNodes[i];
        if (node.className != 'color')
        {
            continue;
        }
        var parent = node.parentNode;
        var prevNode = node.previousSibling;
        var selector = makeColorSelector(node);
        parent.insertBefore(selector, (prevNode ? prevNode.nextSibling : null));
    }
}
(function()
{
	makeColorSelectors();
})();






















var if_picking_color=0;//是否在挑选颜色
(function()
{
	$('#item4').click(function()
	{
		$('#color_picker').animate({'left':'0','top':'0'},500)
	});
	$('#que_ding_yan_se,#qu_xiao_yan_se').hover(function()
	{
		$(this).css("background","purple");
	},function()
	{
		$(this).css("background","orange");
	})
	var color_picker_cloth=document.getElementById("slide_me_to_change_color");
	var color_picker_jia_hao=document.getElementById("color_picker_jia_hao");
	var color_picker_chang_tiao=document.getElementById("color_picker_chang_tiao");
	$('#slide_me_to_change_color,#color_picker_jia_hao,#color_picker_chang_tiao')
	.mousedown(function()
	{
		if_picking_color=1;
	})
	.mousemove(function()
	{
		if(if_picking_color==1)
		{
			temp_page_color=document.getElementById("value_of_color_chooser").value;
			change_whole_page_color();
		}
	})
	.mouseup(function()
	{
		if_picking_color=0;
	})
	$('#que_ding_yan_se').click(function()
	{
		$('#color_picker').stop().animate({"left":"-300px","top":"-300px"},500);
		general_color=temp_page_color;
		var str=general_color; 
  	  	if(general_color.charAt(0)=="#")
  	  	{
  	  		str=general_color.substring(1);
  	  	}
  		update_datas("page_color",str);
	})
	$('#qu_xiao_yan_se').click(function()
	{
		$('#color_picker').animate({"left":"-300px","top":"-300px"},500);
		temp_page_color=general_color;
		change_whole_page_color();
	})
})();
function change_whole_page_color()
{
var color_obj="#click_to_add_local_mp3_msg,.theme_div,.shine,#log_in_to_favorite_msg,.song,#page_bg_div31,#back_from_help_msg,#page_bg_chooser_sure,small,.music_type_menu_item,#qu_xiao_yan_se,#que_ding_yan_se,#now_playing,#other_controls_inner1,#other_controls_inner4,#play_time,#sure,#no_lrc_msg,#no_imgs_msg,#page_bg_div29,#page_bg_div30,.custom_music_sub_1_song,.custom_music_sub_2_song,.custom_music_sub_3_song,.custom_music_sub_4_song,.custom_music_sub_5_song,.custom_music_sub_6_song,.custom_music_sub_7_song,.custom_music_sub_8_song,.custom_music_sub_9_song,.lrc_line,#login_ti_shi *",
bg_color_obj="#fd_opacity_range,#fd_opacity_range_inner_div,#fd_opacity_inner_div1,#fd_opacity_inner_div2,#other_controls_inner4_xie_gang,#other_controls_inner4_left_square,#fd_volume_the_range_inner_div,#fd_volume_the_range,#sui_ji_mode_inner_shang_inner_heng,#sui_ji_mode_inner_xia_inner_heng,#xun_huan_mode_inner_shu,.shun_xu_inner_heng,#left_square,#hidden_content_arraw_right,#ct1,#ct2,#ct3,.subDiv,#the_range1,#the_range1_inner_div,#pause_inner1,#pause_inner2,#other_controls_inner2_inner_div,#other_controls_inner3_inner_div,#tou_ming_du,#tou_ming_du_inner_div,#change_to_mo_fang_mode_inner_div,#mo_fang_volume_the_range,#mo_fang_volume_the_range_inner_div,#mo_fang_jin_du_the_range,#mo_fang_jin_du_the_range_inner_div,#mo_fang_jin_du_the_range_long,#mo_fang_jin_du_the_range_long_inner_div,#mo_fang_volume_xie_gang,#mo_fang_shang_yi_qu_inner,#mo_fang_xia_yi_qu_inner,#mo_fang_pause_inner1,#mo_fang_pause_inner2,#change_to_normal_mode_inner_div",
border_left_color="#mu_lu_xun_huan_mode_bottom_arraw,#sui_ji_mode_inner_shang_inner_arraw,#sui_ji_mode_inner_xia_inner_arraw,#next,#other_controls_inner3_inner_arraw,#mo_fang_play,#mo_fang_xia_yi_qu_inner_arraw,#change_to_normal_mode_arraw,#play",
border_right_color="#mu_lu_xun_huan_mode_top_arraw,#other_controls_inner4_arraw,#previous,#mo_fang_shang_yi_qu_inner_arraw,#mo_fang_volume_arraw,#other_controls_inner2_inner_arraw,#hidden_content_arraw,#change_to_mo_fang_mode_arraw",
border_color="#fd_opacity,#mu_lu_xun_huan_mode,.song,.music_type_menu_item,#xun_huan_mode_inner_square,#adjust_play_mode,.other_controls_inner,#play_or_pause_outer,#mo_fang_play_or_pause_outer,#mo_fang_shang_yi_qu,#mo_fang_xia_yi_qu,#mo_fang_volume,#mo_fang_jin_du,#change_to_normal_mode,#menu,#menu_item_whole,#hidden_content,#change_theme,#change_to_mo_fang_mode,.page_bg_div,#back_from_help_msg,.theme_div",
border_top="#xun_huan_mode_inner_arraw";
	
	$(color_obj).css("color",temp_page_color);
	if(temp_page_color.length==6)
	{
		if(temp_page_color.indexOf("#")==-1)
		{
			$(bg_color_obj).css("background","#"+temp_page_color);
		}
		else
		{
			$(bg_color_obj).css("background",temp_page_color);
		}
	}
	else
	{
		$(bg_color_obj).css("background",temp_page_color);
	}
	$(border_left_color).css("border-left-color",temp_page_color);
	$(border_right_color).css("border-right-color",temp_page_color);
	$(border_color).css("border-color",temp_page_color);
	$('#'+cur_type).css("border-color",temp_page_color);
	$(border_top).css("border-top-color",temp_page_color);
	$('.music_type_menu_item').not($('#'+cur_type)).not('#local').css("border-color","transparent");
	$('#lrc_line'+cur_lrc_line_index).css({
				color:"chocolate"
		});
	$('.'+which_music_type+"_song").eq(di_ji_shou).css({
						color:"purple",
						borderColor:"purple"
				});
}
</script>